import './SignUpLoading.scss'
import { Button } from 'antd'
import { useMount } from 'ahooks'
import { useNavigate } from 'react-router-dom'
import { lazy, useState, Suspense } from 'react'

import { EncryptedData, PermutationData, AddIndexdDB, Decrypt } from '../../Utils/IndexedDB'
import { useRequest } from 'alova'
import { Http } from '../../Api'

import { UserAvatar, UserBackboard } from '../../Config/config'

const LoadSvg = lazy(() => import('../../View/Loading/LoadSvg'))

const SignUpLoading = ({ data, Off }) => {
    const onNavigate = useNavigate()
    // 加载状态
    const [Loading, setLoading] = useState(true)
    // 登录状态
    const [Status, setStatus] = useState(false)
    // 提示文字  (加载步骤 || 失败原因)
    const [TipText, setTipText] = useState('Loading...')
    // 用户信息
    const [UserInfo, setUserInfo] = useState({})


    const [StartUuid, setStartUuid] = useState()




    const { send: getToken } = useRequest(params => Http({ url: '', params }), { immediate: false })
    const { send: getUser } = useRequest(params => Http({ url: '', params }), { immediate: false })
    const { send: getMenu } = useRequest(params => Http({ url: '', params }), { immediate: false })
    const { send: getSheet } = useRequest(params => Http({ url: 'getSheet', params }), { immediate: false })
    const { send: getConfig } = useRequest(params => Http({ url: 'getConfig', params }), { immediate: false })
    const { send: getHome } = useRequest(params => Http({ url: 'getHome', params }), { immediate: false })


    const { send: getRouter } = useRequest(params => Http({ url: 'getRouter', params }), { immediate: false })
    const { send: getStyle } = useRequest(params => Http({ url: 'getStyle', params }), { immediate: false })


    useMount(async () => {
        setTipText('获取用户信息...')
        // const params = await EncryptedData(data)
        // const token = await getToken(params) //获取token
        // const user = await getUser()
        // const menu = await getMenu()
        // setTipText('获取配置信息...')
        // const sheet = await getSheet()
        // await AddIndexdDB('sheet', await Decrypt(sheet.data))
        setTipText('获取主题信息...')
        const config = await getConfig()
        const userData = await Decrypt(config.data)
        const { userInfo } = userData
        setUserInfo(userInfo)
        await AddIndexdDB('theme', userData)
        setTipText('获取首页信息..')
        const home = await getHome()
        await AddIndexdDB('home', await Decrypt(home.data))
        setTipText('获取路由信息...')
        const router = await getRouter()
        const routerData = await Decrypt(router.data)
        await AddIndexdDB('router', routerData)
        setStartUuid(routerData[0].key)
        setTipText('获取样式信息...')
        const style = await getStyle()
        await AddIndexdDB('style', await Decrypt(style.data))
        setTipText('正在登录...')


        // 直接跳转
        // onNavigate('/Admin') 

        setLoading(false)
        setStatus(true)

    })


    return (
        <Suspense>
            <div className='SignUpLoading'>
                {Loading ?
                    <div className='Loading'>
                        <LoadSvg style={{ '--background': 'transparent', '--stroke': '#212121', height: '100%' }} />
                        <div className='Title'>{TipText}</div>
                    </div> :
                    <div className='Options'>
                        {Status ?
                            <div className='Success'>
                                <img className='Back' src={UserBackboard[UserInfo.Backboard]} alt="" />
                                <div className='Avatar'>
                                    <svg fill="none" viewBox="0 0 144 62" xmlns="http://www.w3.org/2000/svg">
                                        <path fill="#212121" d="m111.34 23.88c-10.62-10.46-18.5-23.88-38.74-23.88h-1.2c-20.24 0-28.12 13.42-38.74 23.88-7.72 9.64-19.44 11.74-32.66 12.12v26h144v-26c-13.22-.38-24.94-2.48-32.66-12.12z" fillRule="evenodd" />
                                    </svg>
                                    <img src={UserAvatar[UserInfo.Avatar]} alt="" />
                                </div>
                                <div className='NickName'>{UserInfo.NickName}</div>
                                <div className='BtnList'>
                                    <button className="btn" onClick={() => onNavigate('/Admin')}>后台</button>
                                    <button className="btn" onClick={() => onNavigate(`/Start/${StartUuid}`)}>大屏</button>
                                </div>
                            </div> :
                            <div className='Error'>
                                <div className='Tips'>{TipText}</div>
                                <div className='BtnList'>
                                    <Button size='large'>重新登录</Button>
                                    <Button size='large'>修改密码</Button>
                                    <Button size='large'>联系管理</Button>
                                    <Button size='large'>其他事项</Button>
                                </div>
                            </div>
                        }
                    </div>
                }
            </div>
        </Suspense>
    );
};

export default SignUpLoading;